<template>
	<view class="collection" style="padding-top: 10rpx;">
<!-- 		<view class="top">
			<view class="change" @click="activechange">
				{{active==false?'编辑':'完成'}}
			</view>
		</view> -->
		<view class="content">
				<view class="grid-item" v-for="(item,i) in content" :key="i" >
				<view class="radio" v-if="active" :class="item.active?1:'radioActive'" @click="radiochange(item)"></view>
					<image class="img" :src="item.cover||'/pagesB/static/微信图片_20201124091755.png'" mode="" @click="Details(item.goods_id)"></image>
					<view class="text">
						<view class="title">{{item.name}}</view>
						<view class="price">￥{{item.price}}</view>
					</view>
				</view>
		</view>
		<view class="bottom savebottom" v-if="active">
			<view style="display: flex;">
				<view class="radio" :class="radioA?1:'radioActive'" @click="radioAll">
				</view>
				<view class="name">
					全选
				</view>
			</view>
				<view class="bottomcontent" >
					<view class="button" @click="Submit">
						删除
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/api/md5.js'
	import Request from '@/common/api/request.js'
	import {requestUrl} from '@/common/config.js'
	export default {
		data() {
			return {
				active:false,
				radioA:false,
				access_token:'',
				content:[]
			};
		},
		methods:{
			activechange(){
				this.active=!this.active
				console.log(this.active)
			},
			radioAll(){
				this.radioA=!this.radioA
				this.content.map(v => {
					return v.active = this.radioA
				})
			},
			radiochange(e){
				this.content.forEach(v => {
					if (v.goods_id == e.goods_id) {
						v.active = !v.active
					}
				})
			},
			Details(e){
				// uni.setStorage({
				//     key: 'goods_id',
				//     data: JSON.stringify(e),
				//     success: function () {
				//     }e
				// });e
				uni.navigateTo({
				    url: '/pagesA/CommodityDetails/CommodityDetails?goods_id='+e
				});
			},
			Submit(){
					let arr = []
				if(this.Edit){
					this.content.map(item => {
						if(item.active){
						arr.push(item.goods_id)
						}
					})
				}else{
					this.content.map(item => {
						if(item.active){
							arr.push(item.goods_id)
						}
					})
				}
				let Arr = JSON.stringify(arr.join(',')).replace("\"","").replace("\"","")
				let data = ['data', Arr].join('=')
				let time = Math.round(new Date().getTime() / 1000).toString()
				let _this = this
				let Time = ['time', time].join('=')
				let Access_token = ['access_token', this.access_token].join('=')
				let content = ['content=pinet.FeiMao.2017'].join()
				let arr1 = [content, Time].sort(function(a, b) {
					a - b
				})
				let arr2 = [content,data, Time].sort(function(a, b) {
					a - b
				})
				let newarr = md5(arr2.join('&'))
				uni.request({
					url: requestUrl+'/app/user/deleteGoods',
					method: "GET",
					data: {
						access_token: this.access_token,
						time: time,
						sign: newarr,
						goods_ids: Arr,
					},
					success: function(res) {
						console.log(res)
						uni.showToast({
							title:res.data.message,
							icon:'none'
						})
						if(res.data.errcode==0){
							uni.request({
								url:  requestUrl+'/app/user/getCollections',
								method: "GET",
								data: {
									access_token: _this.access_token,
									time: time,
									sign: newarr,
									type:'2'
								},
								success: function(res) {
									console.log(res)
									if(res.data.errcode==0){
										res.data.content.forEach(v => {
											v.active = false
										})
										_this.content=res.data.content
									}
								}
							});
						}
					}
				});
			}
		},
		onShow() {
			let time = Math.round(new Date().getTime() / 1000).toString()
			this.access_token=JSON.parse(uni.getStorageSync('access_token'))
			let _this = this
			let Time = ['time', time].join('=')
			let Access_token = ['access_token', this.access_token].join('=')
			let content = ['content=pinet.FeiMao.2017'].join()
			let arr = [content, Time].sort(function(a, b) {
				a - b
			})
			let newarr = md5(arr.join('&'))
			uni.request({
				url:  requestUrl+'/app/user/getCollections',
				method: "GET",
				data: {
					access_token: JSON.parse(uni.getStorageSync('access_token')),
					time: time,
					sign: newarr,
					type:'2'
				},
				success: function(res) {
					console.log(res)
					if(res.data.errcode==0){
						res.data.content.forEach(v => {
							v.active = false
						})
						_this.content=res.data.content
					}
				}
			});
		}
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	.collection{
		height: 100%;
		overflow-y: scroll;
		background-color: #F3F4F5;
		display: flex;
		flex-direction: column;
		.top{
			padding: 10rpx 20rpx;
			display: flex;
			flex-direction: row-reverse;
			background-color: #fff;
			margin-bottom: 20rpx;
			.change{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.content{
				width: 96%;
				margin: 0 auto;
				display: flex;
				flex-flow: row wrap;
				justify-content: space-between;
				.grid-item{
					margin-bottom: 20rpx;
					padding-bottom: 20rpx;
					background-color: #fff;
					border-radius: 10rpx;
					// box-sizing: border-box;
					// border-radius: 3px;
					// padding: 10rpx 20rpx;
					// margin: 5rpx;
					// background-color: #fff;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					.radioActive {
						background: url(/pagesA/static/selected／on.png) 0px 0px !important;
						background-size: 32rpx 32rpx;
					}
					
					.radio {
						width: 32rpx;
						height: 32rpx;
						background: url(/pagesA/static/selected%20active.png) 0px 0px;
						background-size: 32rpx 32rpx;
						position: absolute;
						top: 10rpx;
						right: 10rpx;
					}
				.img{
					width: 100%;
					height: 340rpx;
					background-color: pink;
					border-radius: 10rpx 10rpx 0 0;
				}
				.text{
					display: flex;
					flex-direction: column;
					align-items: center;
					.introduce{
						margin: 10rpx 0;
						padding: 8rpx;
						background: #FFF3F3;
						border-radius: 3px;
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #DB1B22;
					}
					.title{
						width: 310rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Light, PingFang SC;
						font-weight: 300;
						color: #333333;
						font-size: 26rpx;
						height: 77rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						padding: 20rpx 20rpx 0;
					}
					.price{
						padding: 0 20rpx;
						box-sizing: border-box;
						margin: 10rpx 0;
						width: 100%;
						line-height: 44rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #DB1B22;
					}
					.evaluate{
						border-top: 1px solid #acacac;
						padding: 10rpx 0;
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							width: 32rpx;
							height: 32rpx;
							margin-right: 3px;
						}
							.content{
								flex: 1;
								font-size: 18rpx;
								font-family: PingFangSC-Light, PingFang SC;
								font-weight: 300;
								color: #777777;
								line-height: 26rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							}
					}
				}
				}
		}
		.bottom {
			width: 100%;
			height: 100rpx;
			display: flex;
			box-sizing: border-box;
			align-items: center;
			background: #fff;
			justify-content: space-between;
			.radioActive {
				background: url(/pagesA/static/selected／on.png) 0px 0px !important;
				background-size: 32rpx 32rpx;
			}

			.radio {
				width: 32rpx;
				height: 32rpx;
				background: url(/pagesA/static/selected%20active.png) 0px 0px;
				background-size: 32rpx 32rpx;
				margin-left: 26rpx;
				margin-right: 6rpx;
			}

			.name {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				margin-left: 16rpx;
			}

			.bottomcontent {
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				line-height: 42rpx;
				margin-left: 50rpx;
				display: flex;
				align-items: center;

				.price {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #DB1B22;
					margin: 0 34rpx 0 0;
					line-height: 42rpx;
					display: block;
					width: 120rpx;
				}

				.freight {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
					line-height: 42rpx;
				}

				.button {
					padding: 12rpx 60rpx;
					background: #DB1B22;
					border-radius: 36px;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 30rpx;
				}
			}
		}
		.savebottom {
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
</style>
